<template>
  <div class="TopNav">
    <div class="container">
      <ul>
        <template v-if="userinfo.account">
          <li>
            <a>
              <i class="iconfont icon-user"></i>{{ userinfo.account }}
            </a>
          </li>
          <li><router-link to="/login">退出登入</router-link></li>
        </template>
        <template v-else>
          <li><router-link to="/login"><i class="iconfont icon-user"></i>登录</router-link></li>
          <li><a>免费注册</a></li>
        </template>
        <li><router-link to="/member/order">我的订单</router-link></li>
        <li><router-link to="/member/content">会员中心</router-link></li>
        <li><a href="javascript:;">帮助中心</a></li>
        <li><a href="javascript:;">关于我们</a></li>
        <li>
          <a href="javascript:;" style="border-right: 0px solid #fff">
            <i class="iconfont icon-phone">手机版</i>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    
  },
  computed: {
    userinfo() {
      return this.$store.state.user.userinfo;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/color.scss";
.TopNav {
  width: 100%;
  height: 53px;
  background: #333333;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .container {
    display: flex;
    justify-content: flex-end;
    ul {
      display: flex;
      li a {
        // width: 90px;
        margin-left: 13px;
        text-align: center;
        color: #fff;
        font-size: 15px;
        border-right: 1px solid #fff;
        padding-right: 10px;
      }
      li span{
        margin-left: 13px;
        text-align: center;
        color: #fff;
        font-size: 15px;
        border-right: 1px solid #fff;
        padding-right: 10px;
      }
      a:hover {
        color: $sucColor;
      }
    }
  }
}
</style>